<template>
  <div class="dashboard-container">
    <!-- 第一行：数据概览卡片 -->
    <el-row :gutter="20" class="dashboard-row">
      <el-col :span="6" v-for="item in statisticsData" :key="item.title">
        <el-card class="statistics-card" :body-style="{ padding: '20px' }">
          <div class="statistics-content">
            <div class="statistics-icon" :style="{ background: item.color }">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="statistics-info">
              <div class="statistics-title">{{ item.title }}</div>
              <div class="statistics-value">{{ item.value }}</div>
              <div class="statistics-change" :class="item.trend">
                {{ item.change }}%
                <el-icon>
                  <CaretTop v-if="item.trend === 'up'" />
                  <CaretBottom v-else />
                </el-icon>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行：图表和工具卡片 -->
    <el-row :gutter="20" class="dashboard-row">
      <!-- 左侧：折线图 -->
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>访问趋势</span>
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">周</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
                <el-radio-button label="year">年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container" ref="lineChartRef"></div>
        </el-card>
      </el-col>

      <!-- 右侧：工具卡片 -->
      <el-col :span="8">
        <el-row :gutter="20">
          <!-- 天气卡片 -->
          <el-col :span="24" style="margin-bottom: 20px;">
            <el-card class="weather-card">
              <template #header>
                <div class="card-header">
                  <span>天气预报</span>
                </div>
              </template>
              <div class="weather-content">
                <div class="weather-main">
                  <el-icon class="weather-icon"><Sunny /></el-icon>
                  <div class="weather-info">
                    <div class="temperature">25°C</div>
                    <div class="weather-desc">晴天</div>
                  </div>
                </div>
                <div class="weather-details">
                  <div>湿度: 65%</div>
                  <div>风速: 3km/h</div>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <!-- 日历卡片 -->
          <el-col :span="24">
            <el-card class="calendar-card">
              <template #header>
                <div class="card-header">
                  <span>日程安排</span>
                </div>
              </template>
              <el-calendar v-model="currentDate" />
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 第三行：饼图和最近活动 -->
    <el-row :gutter="20" class="dashboard-row">
      <!-- 饼图 -->
      <el-col :span="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户分布</span>
            </div>
          </template>
          <div class="chart-container" ref="pieChartRef"></div>
        </el-card>
      </el-col>

      <!-- 最近活动 -->
      <el-col :span="16">
        <el-card class="table-card">
          <template #header>
            <div class="card-header">
              <span>最近活动</span>
              <el-button type="primary" size="small">查看更多</el-button>
            </div>
          </template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="用户" width="180" />
            <el-table-column prop="action" label="活动" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { CaretTop, CaretBottom, Sunny } from '@element-plus/icons-vue'

// 统计数据
const statisticsData = ref([
  {
    title: '总访问量',
    value: '234,567',
    change: '12.5',
    trend: 'up',
    color: '#409EFF',
    icon: 'View'
  },
  {
    title: '活跃用户',
    value: '45,678',
    change: '5.2',
    trend: 'up',
    color: '#67C23A',
    icon: 'User'
  },
  {
    title: '订单数量',
    value: '89,012',
    change: '-2.3',
    trend: 'down',
    color: '#E6A23C',
    icon: 'ShoppingCart'
  },
  {
    title: '转化率',
    value: '25.8%',
    change: '3.1',
    trend: 'up',
    color: '#F56C6C',
    icon: 'TrendCharts'
  }
])

// 折线图配置
const timeRange = ref('week')
const lineChartOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['访问量', '用户量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '访问量',
      type: 'line',
      smooth: true,
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '用户量',
      type: 'line',
      smooth: true,
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
})

// 饼图配置
const pieChartOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '用户分布',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '移动端' },
        { value: 735, name: 'PC端' },
        { value: 580, name: '平板' },
        { value: 484, name: '其他' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

// 表格数据
const tableData = ref([
  {
    date: '2023-11-28 10:00:00',
    name: '张三',
    action: '登录系统',
    status: '成功'
  },
  {
    date: '2023-11-28 09:30:00',
    name: '李四',
    action: '数据导出',
    status: '成功'
  },
  {
    date: '2023-11-28 09:00:00',
    name: '王五',
    action: '创建报表',
    status: '失败'
  }
])

// 添加日历相关数据
const currentDate = ref(new Date())

// 添加图表引用
const lineChartRef = ref<HTMLElement | null>(null)
const pieChartRef = ref<HTMLElement | null>(null)
let lineChart: echarts.ECharts | null = null
let pieChart: echarts.ECharts | null = null

// 修改初始化图表函数
const initCharts = () => {
  // 确保 DOM 元素存在
  if (lineChartRef.value && pieChartRef.value) {
    // 折线图
    lineChart = echarts.init(lineChartRef.value)
    lineChart.setOption(lineChartOption.value)

    // 饼图
    pieChart = echarts.init(pieChartRef.value)
    pieChart.setOption(pieChartOption.value)

    // 监听窗口大小变化
    const handleResize = () => {
      lineChart?.resize()
      pieChart?.resize()
    }

    window.addEventListener('resize', handleResize)
  }
}

onMounted(() => {
  initCharts()
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  min-height: calc(100vh - 84px);
  background-color: #f0f2f5;
}

.dashboard-row {
  margin-bottom: 20px;
}

.dashboard-row:last-child {
  margin-bottom: 0;
}

/* 统计卡片样式 */
.statistics-card {
  height: 120px;
  transition: all 0.3s;
}

.statistics-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.statistics-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.statistics-icon .el-icon {
  font-size: 24px;
  color: #fff;
}

.statistics-info {
  flex: 1;
}

.statistics-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.statistics-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.statistics-change {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.statistics-change.up {
  color: #67C23A;
}

.statistics-change.down {
  color: #F56C6C;
}

/* 天气卡片样式 */
.weather-card {
  height: 200px;
}

.weather-content {
  padding: 20px;
}

.weather-main {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.weather-icon {
  font-size: 48px;
  color: #E6A23C;
  margin-right: 20px;
}

.weather-info .temperature {
  font-size: 36px;
  font-weight: bold;
}

.weather-info .weather-desc {
  color: #909399;
}

.weather-details {
  color: #606266;
  font-size: 14px;
}

/* 图表卡片样式 */
.chart-card {
  height: 100%;
}

.chart-container {
  height: 300px;
}

/* 日历卡片样式 */
.calendar-card {
  height: calc(100% - 220px); /* 减去天气卡片的高度和间距 */
}

/* 表格卡片样式 */
.table-card {
  height: 100%;
}
</style>